<template>
	<view class="container">
		<view class="img-container">
		      <img src="../../static/gg.jpeg" />
		</view>
		<view >
			<uni-notice-bar show-icon scrollable :text="slogan" />
		</view>
		<view class="goods-list">
			<view class="head-context">最新上架</view>
		</view>
		<view>
			<mk-goods-list :goods="goodList" @clickItem="goodsItem"></mk-goods-list>
		</view>
		<!-- <button @click="getWxOpenid1">点击获取用户信息</button> -->
		<auth/>
	</view>
</template>
<script>
	import {getWxOpenid} from "../../service/auth.js"
	import {getLotteryInfoPage,getRedisKey} from "../../service/base.js"
	import auth from "@/components/authorization/index.vue"
	export default {
		components: {
			auth
		},
		data() {
			return {
				goodList:[],
				pageNum: 1,
				isLastPage: false,
				slogan:"系统维护中，请稍后重试"
			}
		},
		onShow() {
			var goodInfo = uni.getStorageSync("goodInfo")
			if(this.goodList && goodInfo){	
				for (let i = 0, len = this.goodList.length; i < len; i++) {
				    if (this.goodList[i].goodInfo.id === goodInfo.id) {
				        this.goodList[i].goodInfo = goodInfo;
				    }
				}
			}
		},
		onLoad() {
			console.log("首页的商品列表查询")
			this.getLotteryInfo()
			this.getRedisKey()
		},
		onReachBottom() {
			if(this.isLastPage){
			  uni.showToast({
				title:"已经最后一页了",
				icon: 'none'
			  })	
			}else{
				this.pageNum ++ 
				this.getLotteryInfo()
			}
		},
		methods: {
			//进行页面的跳转-进入商品详情页面
			goodsItem(item) {
				console.log(item)
				uni.setStorageSync("goodInfo",item.goodInfo)
				uni.navigateTo({
				  url: '/pages/lucky/lucky',
				});
			},
			getRedisKey() {
				getRedisKey({key:"slogan"}).then(res => {
					if(res.data){
						this.slogan = res.data
					}
				})
			},
			getLotteryInfo() {
				getLotteryInfoPage({page_index:this.pageNum,page_size:10}).then(res =>{
					  var list = res.data.list
					  if(list){
						  list.forEach(item =>{
							  this.goodList.push({
								  title: item.name,
								  img: item.url,
								  littleTitle: item.remark,
								  amount: (item.lotteryNum/100 + 30).toFixed(2),
								  amountRemark: item.periodsName+"期抽奖",
								  goodInfo:item
							  })
						  })
					  } 
					  this.isLastPage = res.data.isLastPage
				})
			}
		}
	}
</script>
<style>
	.container {
		background-color: azure;
	}
	.swiper-wrapper {
		width: 100%;
		height: 280rpx;
		padding: 0rpx;
	}
	.swiper-item{
		height: 280rpx;
		background-color: #00aaff;
		font-size: 16pt;
		text-align: center;
	}
	.notice{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 60rpx;
		background-color: #00ff7f;
	}
	.horn{
		display: flex;
		height: 60rpx;
		width: 60rpx;
		background-color: aliceblue;
	}
	.show-msg{
		display: flex;
		height: 60rpx;
		flex: 1;
		justify-content: center;
		align-items: center;
		background-color: #ffaa00;
	}
	.goods-list{
		background-color: #25cb9c;
	}
	.head-context{
		color: whitesmoke;
	}
	.shop-list{
		display: flex;
		flex-direction: row;
		height: 100%;
		width: 750rpx;
		flex-wrap: wrap;
		align-content: flex-start;
		background-color: darkgray;
	}
	.right-list{
		width: 370rpx;
		height: 300rpx;
		background-color: #00ff7f; 
	}
	.right-list1{
		width: 370rpx;		
		height: 260rpx;
		background-color: #ffaa00; 
	}
	.right-list2{
		width: 370rpx;
		height: 200rpx;
		background-color: #ffff00; 
	}
	.right-list3{
		width: 370rpx;
		height: 210rpx;
		background-color: #00aaff; 
	}
	.img-container{
	    width: 678rpx;
	    height: 300rpx;
	    margin: 50rpx auto;
    }
	.img-container img {
	  width: 100%;
	  height: 100%;
	  border-radius: 10rpx;
	}
</style>